<script setup>
import { ref } from 'vue'

// 实现鼠标移入交互
const curIndex = ref(0)
const mouseEnterFn = (i) => curIndex.value = i



</script>


<template>
  <div class="goods-image">
    <!-- 小图列表 -->
    <ul class="small">
      <li v-for="(img, i) in imageList" 
        :key="i" 
        @mouseenter="mouseEnterFn(i)" 
        :class="{ active: i === curIndex }">
        <img :src="img" alt="" />
      </li>
    </ul>
  </div>
</template>